$base-color: #d40e3f;
$list-header-color: #666;
$list-header-bg-color: #ccc;

// For performance, I'm removing default styles
// and re-adding with mixins below (sencha-x-ui)
$include-default-icons: false;
$include-button-uis: false;
$include-toolbar-uis: false;
$include-tabbar-uis: false;
$include-top-tabs: false;

$spinner-color: $base-color;

$index-bar-bg-color: #ccc;
$index-bar-color: #666;

@import 'sencha-touch/default/all';
@import 'spinner';

@include sencha-panel(false);
@include sencha-buttons;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-indexbar;
@include sencha-msgbox;
@include sencha-sheet;
@include sencha-list;
@include sencha-layout;

@include pictos-iconmask('team1');
@include pictos-iconmask('info');
@include pictos-iconmask('time');
@include pictos-iconmask('locate');
@include pictos-iconmask('chat');
@include pictos-iconmask('action');

@include sencha-button-ui('action', $active-color);

@include sencha-tabbar-ui('gray', #111, 'matte', lighten($base-color, 10%));
@include sencha-toolbar-ui('dark', darken($base-color, 10%), $base-gradient);
@include sencha-toolbar-ui('gray', #ccc);

.x-mask.x-mask-gray {
  background-color: rgba(#fff, .2);
}

.x-spinner {
  margin-top: .7em;
  font-size: 200%;
}

.avatar {
  background-color: #eee;
  background-position: center center;
  @include border-radius(.5em);
  -webkit-box-shadow: rgba(#fff,.2) 0 1px 0;
  margin-right: 10px;
  width: 45px;
  height: 45px;
  background-size: 47px auto;
  background-image: inline-image('avatar.jpg');
}

.thumb {
  width: 2.6em;
  height: 2.6em;
  background-color: #eee;
  background-size: 2.6em auto;
  background-position: center center;
  margin: -.6em 10px -.6em -.8em;
}

.x-toolbar.small_title {
  font-size: .6em;
  border-top: 1px solid #bbb;

  .x-toolbar-title {
    text-align: left;
    padding: 0 1.3em;
  }
} 

.x-list-item-body {
  @include display-box;
  @include box-orient(horizontal);
  @include box-align(center);
  
  strong {
    font-weight: bold;
  }
  
  .name {
    @include box-flex(1);
    font-weight: bold;
    font-size: 1.4em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    white-space: nowrap;
    overflow: hidden;
  }
  
  .secondary {
    display: block;
    font-size: 10px !important;
    color: $base-color;
    margin-left: .5em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .tertiary {
    font-weight: normal;
    color: #999;
  }
  
  .tweet {
    display: block;
    @include box-flex(1);
  }
}

body, .x-html, .session-detail {
  background-color: #fff;
}

.bio_overview {
  margin: -1.2em -1.2em 1.2em -1.2em;
  overflow: hidden;
  @include background-gradient(#eee);
  text-shadow: rgba(#fff, .2) 0 .1em 0;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ddd;
  
  h3 {
    margin-top: .9em;
  }
  .avatar {
    margin: 1.2em .9em 1.2em;
    float: left;
    width: 60px;
    height: 60px;
    background-size: 62px auto;
  }
}

.x-html {
  h3 {
    small {
      color: $base-color;
    }
    margin-bottom: .2em;
  }
  h4 {
    font-size: 1.1em;
    line-height: 1.1em;
    color: #999;
    margin-bottom: .5em;
  }
  
  .sponsorList {
    margin: 10px 0 25px 0;
    padding-left: 0;
    list-style-type: none;
    overflow: hidden;
    li {
      display: block;
      float: left;
      margin-right: 20px;
      height: 50px;
      
      img {
        max-height: 50px;
      }
    }
  }

  .credits img {
    display: block;
    margin: 0 auto;
  }
}


a, .link {
  color: $base-color !important;
}
a:visited {
  color: lighten($base-color, 15%) !important;
}

// .x-button.x-button-plain.favestar.favorited img {
//   @include background-gradient(#f5d249, 'glossy');
// }

.sponsor_list_heading {
  font-weight: bold;
}